<template>
    <div class="dashboard-container">
        <div class="app-container">
            <el-card>
                <el-tabs>
                    <el-tab-pane label="角色管理">
                        <!-- 新增角色按钮 -->
                        <el-row style="height:60px">
                            <el-button icon="el-icon-plus" size="small" type="primary" @click="showDialog = true">新增角色</el-button>
                        </el-row>
                        <!-- 表格 -->
                        <el-table border="" :data="list">
                            <el-table-column align="center" label="序号" type="index" width="120" />
                            <el-table-column align="center" label="角色名称" prop="name" width="240" />
                            <el-table-column align="center" label="描述" prop="description" />
                            <el-table-column align="center" label="操作">
                                <template slot-scope="{ row }">
                                    <el-button size="small" type="success">分配权限</el-button>
                                    <el-button size="small" type="primary" @click="editRole(row.id)">编辑</el-button>
                                    <el-button size="small" type="danger" @click="deleteRole(row.id)">删除</el-button>
                                </template>
                            </el-table-column>
                        </el-table>
                        <!-- 分页组件 -->
                        <el-row type="flex" justify="center" align="middle" style="height: 60px">
                            <!-- 分页组件 -->
                            <el-pagination :current-page="page.page" :page-size="page.pageSize" :total="page.total" @current-change="changePage" layout="prev,pager,next" />
                        </el-row>
                    </el-tab-pane>
                    <el-tab-pane label="公司信息">
                        <el-alert title="对公司名称、公司地址、营业执照、公司地区的更新，将使得公司资料被重新审核，请谨慎修改" type="info" show-icon :closable="false" />
                        <el-form label-width="120px" style="margin-top:50px">
                            <el-form-item label="公司名称">
                                <el-input v-model="formData.name" disabled style="width:400px" />
                            </el-form-item>
                            <el-form-item label="公司地址">
                                <el-input v-model="formData.companyAddress" disabled style="width:400px" />
                            </el-form-item>
                            <el-form-item label="邮箱">
                                <el-input v-model="formData.mailbox" disabled style="width:400px" />
                            </el-form-item>
                            <el-form-item label="备注">
                                <el-input v-model="formData.remarks" type="textarea" :rows="3" disabled style="width:400px" />
                            </el-form-item>
                        </el-form>
                    </el-tab-pane>
                </el-tabs>
            </el-card>
            <!-- 编辑弹窗 -->
            <el-dialog title="编辑弹层" :visible="showDialog" @close="btnCancel">
                <el-form ref="roleForm" :model="roleForm" :rules="rules" label-width="120px">
                    <el-form-item label="角色名称" prop="name">
                        <el-input v-model="roleForm.name" />
                    </el-form-item>
                    <el-form-item label="角色描述">
                        <el-input v-model="roleForm.description" />
                    </el-form-item>
                </el-form>
                <!-- 底部 -->
                <el-row slot="footer" type="flex" justify="center">
                    <el-col :span="6">
                        <el-button size="small" @click="btnCancel">取消</el-button>
                        <el-button size="small" type="primary" @click="btnOK">确定</el-button>
                    </el-col>
                </el-row>
            </el-dialog>
        </div>
    </div>
</template>

<script>
import { getRoleList, getCompanyInfo, getRoleDetail, updateRole, deleteRole, addRole } from '@/api/setting'
import { mapGetters } from 'vuex'
export default {
    data () {
        return {
            list: [],
            page: {
                page: 1,
                pageSize: 10,
                total: 0
            },
            formData: {
                name: '',
                companyAddress: '',
                mailbox: '',
                remarks: ''
            },
            showDialog: false,
            roleForm: {},
            rules: {
                name: [{ required: true, message: '角色名称不能为空', trigger: 'blur' }]
            }
        }
    },

    created () {
        this.getRoleList()      // 获取角色列表
        this.getCompanyInfo()   // 获取公司信息
    },

    computed: {
        ...mapGetters(['companyId'])
    },

    methods: {
        /**
         * @description: 获取角色管理列表数据
         * @author: Yong
         * @function   getRoleList
         * @param {*}  参数
         * @param {*}  参数
         * @return {*} 
         * @date: 2021-05-17 09:43:48
         */

        async getRoleList () {
            const { total, rows } = await getRoleList(this.page)
            this.page.total = total
            this.list = rows
        },

        /**
         * @description: 改变页数-获取对应页数数据
         * @author: Yong
         * @function   changePage
         * @param {*}  newPage
         * @return {*} 
         * @date: 2021-05-17 09:44:09
         */

        changePage (newPage) {
            this.page.page = newPage
            this.getRoleList()
        },

        /**
         * @description: 获取公司信息
         * @author: Yong
         * @function   getCompanyInfo
         * @param {*}  参数
         * @param {*}  参数
         * @return {*} 
         * @date: 2021-05-17 10:33:22
         */

        async getCompanyInfo () {
            this.formData = await getCompanyInfo(this.companyId)
        },

        /**
         * @description: 删除角色
         * @author: Yong
         * @function   deleteRole
         * @param {*}  id
         * @return {*} 
         * @date: 2021-05-17 10:33:22
         */
        async deleteRole (id) {
            //  提示
            try {
                await this.$confirm('确认删除该角色吗') // 只有点击了确定 才能进入到下方
                await deleteRole(id)    // 调用删除接口
                this.getRoleList()      // 重新加载数据
                this.$message.success('删除角色成功')
            } catch (error) {
                console.log(error)
            }
        },

        /**
         * @description: 点击编辑-显示弹窗同时获取角色信息
         * @author: Yong
         * @function   editRole
         * @param {*}  id
         * @return {*} 
         * @date: 2021-05-17 10:33:22
         */
        async editRole (id) {
            this.roleForm = await getRoleDetail(id)
            this.showDialog = true // 为了不出现闪烁的问题 先获取数据 再弹出层
        },

        /**
         * @description: 点击确定编辑角色/新增角色-有ID编辑，无新增
         * @author: Yong
         * @function   btnOK
         * @return {*} 
         * @date: 2021-05-17 10:33:22
         */
        async btnOK () {
            try {
                await this.$refs.roleForm.validate()
                // 1.校验通过
                if(this.roleForm.id) {
                    // 2.更新角色信息
                    await updateRole(this.roleForm)
                } else {
                    // 新增业务
                    await addRole(this.roleForm)
                }
                // 3.重新拉取数据
                this.getRoleList()
                this.$message.success('操作成功')
                this.showDialog = false
            } catch (e) {
                console.log(e)
            }
        },

        btnCancel() {
             this.roleForm = {
                name: '',
                description: ''
            }
            // 移除校验
            this.$refs.roleForm.resetFields()
            this.showDialog = false
        }
    }
}
</script>

<style>
</style>
